<template>
  <div class="flex items-center gap-2">
    <div class="h-[32px] w-[32px]">
      <img
        v-if="userPhoto && !photoPending"
        :src="userPhoto"
        class="rounded-[4px]"
      />
      <Skeletor v-else-if="photoPending" class="rounded-[4px]" size="32" />
      <SvgoErrAvaSquare v-else filled :font-controlled="false" />
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ApiEndpoints } from '~/types/ApiEndpoints'

interface IProps {
  id: string
}

const props = withDefaults(defineProps<IProps>(), {
  id: ''
})

const { data: userPhotoBuffer, pending: photoPending } = await useAPILazyFetch(
  ApiEndpoints.GET_USER_PHOTO,
  { query: { contactId: props.id } }
)

const userPhoto = computed(() => {
  if (userPhotoBuffer.value) {
    return useBufferToImgSrc(useUnProxy(userPhotoBuffer)?.data)
  } else return ''
})
</script>

<style scoped></style>
